<!DOCTYPE html>
<html lang="en">
  <head>
    <title data-i18n="setupPageTitle"></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
    <link rel="shortcut icon" type="image/png" href="../images/addon-logo.svg" />
    <link rel="stylesheet" href="install.scss" />
  </head>

  <body class="bg-body-tertiary">
    <div class="container-fluid vh-100">
      <div class="row justify-content-center">
        <div class="wrapper my-4 px-4 py-0">
          <div class="card px-0 pt-4 pb-0 mt-3 mb-3">
            <h1 class="text-center" data-i18n="setupPageTitle"></h1>
            <div class="row">
              <div class="pb-3">
                <ul class="text-center" id="progressbar">
                  <li class="bi-clipboard-check" id="license-agreement"><strong data-i18n="setupPageTabLicenseAgreement"></strong></li>
                  <li class="bi-download" id="connector-installation"><strong data-i18n="setupPageTabConnectorInstallation"></strong></li>
                  <li class="bi-cloud-download" id="runtime-installation"><strong data-i18n="setupPageTabRuntimeInstallation"></strong></li>
                  <li class="bi-check" id="ready"><strong data-i18n="setupPageTabReady"></strong></li>
                </ul>

                <!-- License Agreement -->
                <div id="license-agreement-view" class="px-3 d-none">
                  <blockquote class="text-justify bg-body-tertiary border-start border-5 p-3">
                    <p data-i18n="setupPageLicenseBase"></p>
                    <hr />
                    <p data-i18n="setupPageLicenseThirdPartyIncluded"></p>
                    <ul>
                      <li data-i18n="setupPageLicenseLogo"></li>
                      <li data-i18n="setupPageLicenseFirefoxScripts"></li>
                      <li data-i18n="setupPageLicenseFirefoxUiFix"></li>
                      <li data-i18n="setupPageLicenseFirefoxSource"></li>
                      <li data-i18n="setupPageLicenseMetropolisFont"></li>
                      <li data-i18n="setupPageLicenseBootstrapIcons"></li>
                    </ul>
                    <p data-i18n="setupPageLicenseThirdPartyDownloaded"></p>
                    <ul>
                      <li data-i18n="setupPageLicense7ZipDownloaded"></li>
                      <li data-i18n="setupPageLicenseFirefoxDownloaded"></li>
                    </ul>
                    <hr />
                    <p data-i18n="setupPageLicensePrivacyPolicy"></p>
                    <hr />
                    <p data-i18n="setupPageLicenseLinks"></p>
                    <p data-i18n="setupPageLicenseConsent"></p>
                  </blockquote>
                  <div class="text-center">
                    <button type="button" class="btn btn-outline-danger me-2" id="license-agreement-decline" data-i18n="setupPageLicenseDecline"></button>
                    <button type="button" class="btn btn-outline-success ms-2" id="license-agreement-accept" data-i18n="setupPageLicenseAccept"></button>
                  </div>
                </div>

                <!-- Connector Installation -->
                <div id="connector-installation-view" class="px-3 d-none">
                  <p data-i18n="setupPageConnectorInstallationMain"></p>
                  <div class="d-none" id="connector-version-error">
                    <p data-i18n="setupPageConnectorInstallationIncompatible"></p>
                    <ul class="list-unstyled">
                      <li><strong data-i18n="commonExtensionVersion"></strong> <span id="connector-version-error-extension"></span></li>
                      <li><strong data-i18n="commonNativeVersion"></strong> <span id="connector-version-error-native"></span></li>
                    </ul>
                  </div>
                  <div class="d-none" id="connector-native-error">
                    <p>
                      <strong><span data-i18n="commonError"></span>:</strong>
                      <span id="connector-native-error-text"></span>
                    </p>
                  </div>
                  <iframe id="connector-instructions" src="instructions.html"></iframe>
                </div>

                <!-- Runtime Installation -->
                <div id="runtime-installation-view" class="px-3 d-none">
                  <p id="runtime-auto-install" data-i18n="setupPageRuntimeInstallationAuto"></p>
                  <p id="runtime-manual-install" data-i18n="setupPageRuntimeInstallationManual" class="d-none"></p>
                  <p id="runtime-needs-7zip" data-i18n="setupPageRuntimeInstallation7Zip" class="d-none"></p>
                  <p data-i18n="setupPageRuntimeInstallationAfter"></p>
                  <p id="runtime-install-error" class="d-none">
                    <strong><span data-i18n="commonError"></span>:</strong>
                    <span id="runtime-install-error-text"></span>
                  </p>
                  <div class="text-center mt-3">
                    <button type="button" class="btn btn-outline-success" id="runtime-install-start" data-i18n="buttonRuntimeInstallDefault"></button>
                  </div>

                  <div class="mt-3">
                    <details>
                      <summary><strong class="lead" data-i18n="setupPageAdvancedOptionsTitle"></strong></summary>
                      <div style="padding-left: 1rem;" class="pb-1">
                        <strong data-i18n="setupPageAdvancedOptionsFromArchiveTitle"></strong>
                        <ol>
                          <li data-i18n="setupPageAdvancedOptionsFromArchiveStep1"></li>
                          <li data-i18n="setupPageAdvancedOptionsFromArchiveStep2"></li>
                        </ol>
                      </div>
                      <div style="padding-left: 1rem;" class="pb-1">
                        <strong data-i18n="setupPageAdvancedOptionsPackageManagerTitle"></strong>
                        <ol>
                          <li data-i18n="setupPageAdvancedOptionsPackageManagerStep1"></li>
                          <li data-i18n="setupPageAdvancedOptionsPackageManagerStep2"></li>
                        </ol>
                      </div>
                      <div style="padding-left: 1rem;" class="pb-1">
                        <strong data-i18n="setupPageAdvancedOptionsAlternativeBrowserTitle"></strong>
                        <ol class="mb-0">
                          <li data-i18n="setupPageAdvancedOptionsAlternativeBrowserStep1"></li>
                          <li data-i18n="setupPageAdvancedOptionsAlternativeBrowserStep2"></li>
                          <li data-i18n="setupPageAdvancedOptionsAlternativeBrowserStep3"></li>
                        </ol>
                        <p class="ps-3" data-i18n="setupPageAdvancedOptionsAlternativeBrowserLink"></p>
                      </div>
                      <div style="padding-left: 1rem;" class="pb-1">
                        <strong data-i18n="setupPageAdvancedOptionsOverlayTitle"></strong>
                        <p class="ps-3" data-i18n="setupPageAdvancedOptionsOverlayLink"></p>
                      </div>
                      <div style="padding-left: 1rem;" class="pb-1">
                        <strong data-i18n="setupPageDefaultRuntimeLocationTitle"></strong>
                        <ul>
                          <li>Windows: <kbd>%APPDATA%\FirefoxPWA\runtime\</kbd></li>
                          <li>Linux & BSD: <kbd>$XDG_DATA_HOME/firefoxpwa/runtime/</kbd> <span data-i18n="commonOr"></span> <kbd>$HOME/.local/share/firefoxpwa/runtime/</kbd></li>
                          <li>macOS: <kbd>$HOME/Library/Application Support/firefoxpwa/runtime/</kbd></li>
                        </ul>
                      </div>
                    </details>
                  </div>
                </div>

                <!-- Ready -->
                <div id="ready-view" class="px-3 d-none">
                  <p data-i18n="setupPageReady"></p>
                </div>

                <!-- Language Switcher -->
                <div class="language-switcher mx-auto text-center">
                  <label class="fw-bold mb-2" for="setup-language" data-i18n="managePageSettingsLanguage"></label>
                  <select class="form-select form-select-sm" id="setup-language"></select>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script type="module" src="install.js"></script>
  </body>
</html>
